<template>
  <el-button @click="handleOpen">打开表单弹窗</el-button>
  
  <zl-form-dialog ref="formDialogRef" :option="formDialogOption" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ZlFormDialog } from '@zl-crud/components'
import '@zl-crud/components/form-dialog/style/index'

const formDialogRef = ref()

const formDialogOption = {
  dialogOption: {
    title: '表单弹窗',
    width: 800
  },
  formOption: {
    mock: true,
    mockTemplate: {
      id: '@id',
      name: '@cname',
      age: '@integer(18, 60)',
      email: '@email'
    },
    AvueOption: {
      column: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '邮箱',
          prop: 'email'
        }
      ]
    }
  }
}

const handleOpen = () => {
  formDialogRef.value.open()
}
</script>